<template>
  <div class="home-container">
    <div class="menu">
        <el-menu
            router
            :default-active="activePath"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            unique-opened
            text-color="#fff"
            active-text-color="#409eff">
          <el-submenu :index="item.id.toString()" v-for="(item,index1) in menuList" :key="index1">
            <template v-slot:title>
              <i class="el-icon-setting"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item  :index="path[index1]" @click="saveNavPath(path[index1])">{{ item.children[0].name }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

        </el-menu>

      </div>
    <div class="header">
      <el-header style=" font-size: 12px;height: 40px">
        <el-dropdown trigger="click" @command="handleCommand">
          <i class="el-icon-arrow-down" style="margin-right: 15px"></i>
          <span>{{ $store.state.userInfo.name }}</span>
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
           <template v-slot:dropdown>
             <el-dropdown-menu>
               <el-dropdown-item>查看</el-dropdown-item>
               <el-dropdown-item command="logOut">退出</el-dropdown-item>
             </el-dropdown-menu>
           </template>
        </el-dropdown>
      </el-header>

    </div>
    <div class="main">
      <el-main>
          <router-view></router-view>
      </el-main>
    </div>

    </div>
</template>

<script>
import {getMenu} from "../api/menu";
export default {
  name: "Home",
  data(){
    return{
      menuList:[],
      path:['userList','categoryList','goodsList','reviewList','orderList','swiperList','menuList'],
      activePath:''
    }
  },
  mounted() {
    this.getMenuList()
    this.getNavPath()
  },
 
  methods:{
    async getMenuList(){
      const res = await  getMenu()
      if(res && res.status === 200){
        this.menuList = res.data

      }
      console.log(res);
    },
    saveNavPath(path){
      console.log(path)
      window.localStorage.setItem('currentPath',path)
    },
    getNavPath(){
      if(this.$route.path==='/home/statistics'){
        this.activePath = ''
      }else{
      this.activePath = window.localStorage.getItem('currentPath')
      }
    },
    // 退出登录
    async handleCommand(){
     const confirm = await this.$confirm('是否退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
      if(confirm === 'confirm'){
        this.$store.dispatch('logOut')
      }
    }
  }

}
</script>

<style scoped lang="css">
.home-container{
  width: 100%;
  height: 100%;
  display: flex;
  /*flex-wrap: wrap;*/
}
.menu{
  width: 15%;
  height: 100%;
}
.el-menu{
  width: 100%;
  height: 100%;
  background-color: #545c64;

}
.header{
  height: 40px;
  width: 85%;
}
.el-dropdown{
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep.el-header{
  /*height: 10%;*/
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #eeeeee;
}
.main{
  /*height: 100%;*/
  height: calc(100% - 40px);
  width: 85%;
  position: absolute;
  top: 40px;
  left: 15%;
}
 ::v-deep.el-main{
  height: 100%;
  width: 100%;
  padding-top: 10px;
  overflow-y: auto;

}
/*.el-dropdown{*/
/*  width: 10%;*/
/*}*/
.el-avatar{
  margin-left: 10px;
}
</style>